<template>
	<view>
		<view class="viewTab " >
			<view class="tabBar top" :style="{'--color':color,backgroundColor:tabBar.bgColor}">
				<view class="list flex-1" v-for="(item,index) in tabBar.list" :key="index"
					:class="!item.isNav && tab == item.id?'theme':'color_66'" @click="swichTab(item)">
					<view class="bulge flexac zIndex m-bot4" :style="{background: tabBar.iconBg || '#fff'}" v-if="item.mode">
						<view class="iconfont size50" :class="item.icon" :style="{color: tabBar.iconColor || '#666'}"></view>
					</view>
					<view class="iconfont size40 m-bot4" :class="item.icon" v-else></view>
					<text class="h6">{{item.title}}</text>
				</view>
			</view>
		</view>

		<showModel @cancelFunc='setHome({showMode:false})' v-if='showMode' type='2'></showModel>
		<!-- 打开客服 -->
		<KeFu v-if="showKefu" @cancelFunc="setHomeKefu({showKefu:false})" @openModal="setHome({showMode: true})"></KeFu>
		<!-- 分享海报 -->
		<SharePoster v-if='showShareQr' myid=' ' type='1' pageType='0' @closePoster='setHomeShare({showShareQr:false})'></SharePoster>
		<!-- 口令弹框 -->
		<prompt v-if="showPrompt" @cancelFunc="setPrompt(false)"></prompt>
	</view>

</template>


<script>
	import { mapState, mapMutations } from 'vuex';
	import KeFu from "@/components/showKefu.vue"
	import SharePoster from "@/components/sharePoster.vue"
	export default {
		name: "tabBar",
		props:['tab'],
		data() {
			return {
				defaultTit: { // tabBar页面的默认标题
					3:'分类',4:'点餐',5:'门店',6:'预约活动',7:'购物车',9:'资讯',11:'游戏',14:'学习',15:'答题',16:'会员中心'
				}
			};
		},
		components: {
			KeFu,
			SharePoster
		},
		created() {
			// #ifdef MP-WEIXIN
			 uni.hideTabBar()
			// #endif
			
			if(!this.tab || !this.tabBar) return;
			const item = this.tabBar.list.find((n)=>!n.isNav && n.id == this.tab);
			const tabTitle = this.defaultTit[this.tab] || ''
			if(!item) return this.changeTab({tabTitle, tabId:this.tab})
			this.changeTab({tabTitle:item.title || tabTitle, tabId:item.id})
		},
		
		methods: {
			...mapMutations(['changeTab', 'setPrompt', 'setHome', 'setHomeKefu', 'setHomeShare']),
			swichTab(item) {
				// 功能
				if(item.isNav == 2) return this.$pop.funcBtnClick(item)

				// 跳转普通页面
				if(item.isNav == 1) return this.$banerGo(item)

				// 跳tabBar页面
				let pages = getCurrentPages()
				let page = pages[pages.length - 1]
				// console.log('当前tab', item, page)
				if(page.$page.fullPath == item.path) return
				if(item.id == 1 || item.id == 2) return this.$common.sTab(item.path);
				// 所有分类(电商)
				if(item.id == 3 && item.cateType){
					const path = `${item.path}?cateType=${item.cateType}`
					this.$rectTo(path);
					return
				}
				// 某个分类
				if(item.id == 12){
					const path = `${item.path}?back=0&classId=${item.classId}`
					this.$rectTo(path);
					return;
				}
				// 订单
				if(item.id == 13){
					const path = `${item.path}?back=0`;
					this.$rectTo(path);
					return;
				}
				
				this.$rectTo(item.path);
			}
		},

		computed: {
			...mapState(['tabBar', 'color', 'tabId', 'vid', 'showPrompt', 'showMode', 'showKefu', 'showShareQr'])
		}
	}
</script>


<style lang="scss" scoped>
	.viewTab{
		width: 100%;
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tabBar {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10060;
		box-sizing: content-box;
		display: flex;
		align-items: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.list {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		.bulge {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-top: -60rpx;
			box-shadow: 0 0 20rpx 0 rgba(214, 214, 214, 0.5);
		}
	}

	.Cutoff {
		width: 100%;
		height: 360rpx;
		box-sizing: border-box;
	
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.theme {
		color: var(--color);
	}
</style>